<template>
  <div class="guanggao">
    <!-- 头部 -->
    <div class="title">广告管理</div>

    <!-- 条件查询 -->
    <div class="chaxun">
      <div class="text">查询条件</div>
      <div class="chaxunxuanze">
        <span class="mingcheng">
          广告名称：
          <input type="text" />
        </span>
        <span class="weizhi">
          广告位置：
          <input type="text" placeholder="全部" />
        </span>
        <span class="shangxian">
          上线状态：
          <input type="text" placeholder="全部" />
        </span>
        <span>
          <el-button>重置</el-button>
          <el-button type="primary">查询</el-button>
        </span>
      </div>
    </div>
    <!-- 广告列表按钮 -->
    <div class="list">
      <div class="name">广告列表</div>
      <div class="button">
        <el-button type="primary">
          <el-icon>
            <Plus />
          </el-icon>新增
        </el-button>
        <el-button type="danger">
          <el-icon>
            <Delete />
          </el-icon>删除
        </el-button>
        <el-button>上线</el-button>
        <el-button>下线</el-button>
      </div>
      <!-- 列表内容-->

      <div class="Content">
        <el-table :data="tableData.list" style="width: 100%">
          <el-table-column prop="id" label="广告编号" />
          <el-table-column prop="name" label="广告名称" />
          <el-table-column prop="pic" label="商品图片" />
          <el-table-column prop="adress" label="跳转地址" />
          <el-table-column prop="status1" label="广告位置" />
          <el-table-column prop="time" label="广告时间" />
          <el-table-column prop="status" label="下线" />
          <el-table-column prop="do" label="操作">
            <template #default="scope">
              <el-button link type="primary" @click.prevent="editRow(scope.row)">编辑</el-button>
              <el-button link type="primary" @click.prevent="deleteRow(scope.row)">删除</el-button>
              <el-button link type="primary" @click.prevent="watchRow(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Plus, Delete } from "@element-plus/icons-vue";

import { guanggao_list } from "@/axios/api.js";

import { onMounted, reactive, ref, computed } from "vue";
// import { RouterLink, RouterView } from "vue-router";

//定义响应式数据
//广告列表渲染数据
var tableData = reactive({ list: [] });

//广告列表渲染发请求
onMounted(() => {
  guanggao_list()
    .then(res => {
      // console.log(res.data);
      tableData.list = res.data.list;
      console.log(tableData.list);
    })
    .catch(e => {});
});
</script>

<style lang="scss" scoped>
.guanggao {
  width: 100%;
  .title {
    width: 100%;
    font-family: "Arial Negreta", "Arial Normal", "Arial";
    font-weight: bolder;
    font-style: normal;
    font-size: 20px;
    padding: 10px 0;
    // background-color: #eee;
    border-bottom: 1px solid #ccc;
  }
  .chaxun {
    margin-top: 20px;
    .text {
      font-family: "Arial Negreta", "Arial Normal", "Arial";
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
    }
    .chaxunxuanze {
      margin-top: 10px;
      span {
        margin-right: 40px;
        input {
          width: 200px;
          height: 30px;
          outline: none;
          border-radius: 5px;
        }
      }
      .weizhi,
      .shangxian {
        input {
          width: 100px;
        }
      }
    }
  }
  .list {
    margin-top: 30px;
    .name {
      font-weight: 700;
    }
    .button {
      margin-top: 20px;
    }
    .Content {
      margin-top: 20px;
    }
  }
}
</style>